
/**/
(function top() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".map1  .chart"));
    var option = {
        tooltip: {
            trigger: 'item'
        },
       /* legend: {
            orient: 'vertical',
            left: 'left',
            data: ['高校分布图']
        },*/
        legend: {
            data: ['所有高校','本科高校','985高校','211高校'],
            left: 'center',
            top: 40,
            selected: {'所有高校': true,'本科高校': false,'985高校': false,'211高校': false},
            selectedMode: "single",
            textStyle: {
                color: 'green',
                fontSize: 16
            }
        },
        visualMap: {
            type: 'piecewise',
            pieces: [
                {min: 100, max: 999, label: '高校100-999所', color: '#4e160f'},
                {min: 50, max: 99, label: '高校50-100所', color: '#974236'},
                {min: 10, max: 49, label: '高校10-49所', color: '#ee7263'},
                {min: 1, max: 9, label: '高校1-9所', color: '#4c9bfd'},
            ],
            textStyle: {
                color: "#A3E00B"
            },
            // color: ['#E0022B', '#E09107', '#A3E00B']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                // dataView: { show: true, readOnly: false },
                // restore: { show: true },
                // saveAsImage: { show: true }
            }
        },
        roamController: {
            show: true,
            left: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series: [{
                name: '所有高校',
                type: 'map',
                mapType: 'china',
                roam: true,
                label: {
                    show: true,
                    color: "#0a0b0d"
                },
                data: []
            }
            , {
                name: '本科高校',
                type: 'map',
                mapType: 'china',
                roam: true,
                emphasis: {
                    label: {
                        show: true,
                        color: 'black'
                    },
                    areaColor: '#fce8d5'
                },
                data: []
            }, {
                name: '985高校',
                type: 'map',
                mapType: 'china',
                roam: true,
                emphasis: {
                    label: {
                        show: true,
                        color: 'black'
                    },
                    areaColor: '#fce8d5'
                },
                data: []
            }, {
                name: '211高校',
                type: 'map',
                mapType: 'china',
                roam: true,
                emphasis: {
                    label: {
                        show: true,
                        color: 'black'
                    },
                    areaColor: '#fce8d5'
                },
                data: []
            }
            ]
    };
    $.ajax({
        url: "http://localhost:8080/type",
        type: 'get',
        dataType: 'json',
        success: function (res) {
            if (res) {
                //获取到各个省份的数据
                var name = [];
                var value = [];
                var results = []
                for (let i = 0; i < res.length; i++) {
                    name[i] = res[i]["province_name"]
                    value[i] = res[i]["counts"]
                    results.push({name: name[i], value: value[i]})
                }
                option.series[0].data = results;
                console.log(results);
                myChart.setOption(option);
            }
        }});
    $.ajax({
        url: "http://localhost:8080/typeB",
        type: 'get',
        dataType: 'json',
        success: function (res1) {
            if (res1) {
                //获取到各个省份的数据
                const n = [];
                const v = [];
                const results1 = [];
                for (let i = 0; i < res1.length; i++) {
                    n[i] = res1[i]["province_name"]
                    v[i] = res1[i]["counts"]
                    results1.push({name: n[i], value: v[i]})
                }
                option.series[1].data = results1;
                console.log(results1);
                myChart.setOption(option);
            }
        }})
    $.ajax({
        url: "http://localhost:8080/selectCount985",
        type: 'get',
        dataType: 'json',
        success: function (res1) {
            if (res1) {
                //获取到各个省份的数据
                const n = [];
                const v = [];
                const results2 = [];
                for (let i = 0; i < res1.length; i++) {
                    n[i] = res1[i]["province_name"]
                    v[i] = res1[i]["counts"]
                    results2.push({name: n[i], value: v[i]})
                }
                option.series[2].data = results2;
                console.log(results2);
                myChart.setOption(option);
            }
        }})
    $.ajax({
        url: "http://localhost:8080/selectCount211",
        type: 'get',
        dataType: 'json',
        success: function (res1) {
            if (res1) {
                //获取到各个省份的数据
                const n = [];
                const v = [];
                const results3 = [];
                for (let i = 0; i < res1.length; i++) {
                    n[i] = res1[i]["province_name"]
                    v[i] = res1[i]["counts"]
                    results3.push({name: n[i], value: v[i]})
                }
                option.series[3].data = results3;
                console.log(results3);
                myChart.setOption(option);
            }
        }})
    //使用指定的配置项和数据显示图表
    //获取数
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();





